<template>
  <div class="page-container">
    <div class="tlts">
      <div class="tlt_l"></div>
      <div class="tlt_c">工单快捷筛选</div>
      <div class="tlt_r">
        <img class="icon-img" src="../../../../assets/workorder_icon.png" />
        <span class="tlt_name" @click="imgTipModaShow">工单操作流程</span>
      </div>
    </div>

    <work-list-quick-navigation ref="listQuickNavigationRef" :isSiteCarHouse="isSiteCarHouseKeep" @change="quickNavigationChange" />
    <div class="tlts">
      <div class="tlt_l"></div>
      <div class="tlt_c">订单快捷筛选</div>
    </div>
    <order-list-quick-navigation ref="OrderListQuickNavigationRef" @change="orderQuickNavigationChange" />
    <div class="tlts">
      <div class="tlt_l"></div>
      <div class="tlt_c">工单筛选</div>
    </div>
    <list-searcher :searchList="searchList" :needHide="true" v-model:searchForm="queryParam" @loadData="loadData" @reset="onResize" />
    <div class="tlts">
      <div class="tlt_l"></div>
      <div class="tlt_c">订单筛选</div>
    </div>
    <list-searcher
      :searchList="orderSearchList"
      v-model:searchForm="queryParam"
      @loadData="loadData"
      @reset="onResize"
      :showButton="false"
    />
    <table-index :table="table" :rowKey="`id`" @loadData="loadData">
      <template #table-summary>
        <div>
          车管家调度模式：
          <span class="switch-tip">
            <a-tooltip :content="switchTipOpenText">
              {{ switchTipOpen ? '开启' : '关闭' }}
              <icon-question-circle />
            </a-tooltip>
          </span>
        </div>
      </template>
      <!-- workType工单类型的枚举 1, "交车工单"  2, "还车工单"  3, "换车工单" -->
      <template #orderMsg="{ record }">
        <div
          >{{ record.orderInfo.orderTypeName || '-' }} | {{ record.orderInfo.channelTypeName || '-' }} |
          {{ record.orderInfo.orderStatusName || '-' }}</div
        >
        <div>
          <span
            v-if="record && record.orderInfo && record.refType == 1"
            @click="() => onLink(record)"
            :class="usePermission('svms:order:short-order.detail') ? 'order-line' : ''"
            >{{ record.orderInfo.channelType ? record.orderInfo.channelOrderCode : record.orderInfo.orderCode }}</span
          >
          <span
            v-if="record && record.orderInfo && record.refType == 2"
            @click="() => onLink(record)"
            :class="usePermission('svms:order:long-order.detail') ? 'order-line' : ''"
            >{{ record.orderInfo.channelType ? record.orderInfo.channelOrderCode : record.orderInfo.orderCode }}</span
          >
        </div>
        <div v-if="record.workType == 1">
          <div>预取：{{ record.orderInfo.startTime }}</div>
          <div v-if="record.orderInfo && record.orderInfo.actualStartTime">实取：{{ record.orderInfo.actualStartTime }}</div>
        </div>
        <div v-if="record.workType == 2">
          <div>预还：{{ record.orderInfo.endTime }}</div>
          <div v-if="record.orderInfo && record.orderInfo.actualEndTime">实还：{{ record.orderInfo.actualEndTime }}</div>
        </div>
        <div v-if="record.workType == 3">
          <div>换车时间：{{ record.orderInfo.replacedCarTime }}</div>
        </div>
      </template>
      <template #carMsg="{ record }">
        <div v-if="record.workType == 1 || record.workType == 2">
          <div v-if="record.carLicenseNo">{{ record.carLicenseNo }}</div>
          <tag type="danger" v-if="record.workCarLabel">{{ record.workCarLabel }}</tag>
          <div>{{ record.carModelName || '-' }}</div>
        </div>
        <div v-if="record.workType == 3">
          <div>
            <tag type="primary">换上车</tag> {{ record.carLicenseNo || '-' }}
            <tag type="danger" v-if="record.workCarLabel">{{ record.workCarLabel }}</tag>
          </div>
          <div>{{ record.carModelName }}</div>
          <div>
            <tag type="primary">换下车</tag> {{ record.replacedCarLicenseNo || '-' }}
            <tag type="danger" v-if="record.replacedCarLabel">{{ record.replacedCarLabel }}</tag>
          </div>
          <div>{{ record.replacedCarModelName }}</div>
        </div>
      </template>
      <template #staffMsg="{ record }">
        <div>{{ record.workOperatorName || '-' }}</div>
        <div>{{ record.workOperatorPhone || '-' }}</div>
      </template>
      <template #isHousekeep="{ record }">
        <status-tag :value="record.isHousekeep" :label="record.isHousekeep == 1 ? '开启' : '关闭'" />
        <!-- <div>{{ record.isHousekeep == 1 ? '开启' : '关闭' }}</div> -->
      </template>
      <template #statusNames="{ record }">
        <div>
          {{ record.statusName }}
          <div
            v-if="
              record.workSonStatus &&
              ((record.status == 3 && record.workSonStatus == 31) ||
                (record.status == 3 && record.workSonStatus == 33) ||
                (record.status == 4 && record.workSonStatus == 41) ||
                (record.status == 4 && record.workSonStatus == 42) ||
                (record.status == 6 && record.workSonStatus == 32))
            "
            class="workson_status"
          >
            ({{ record.workSonStatusName }})
          </div>
        </div>
      </template>
      <!-- 备注 -->
      <template #remark="{ record }">
        <div class="remark-info">
          {{ record.orderInfo.remark || '-' }}
        </div>
        <div class="remark-btn" v-if="record.orderInfo.remark" @click="showRemarkModal(record)">查看更多</div>
      </template>
    </table-index>
    <!-- 指派负责人 -->
    <assign-modal ref="assignModalRef" @ok="handleRefresh" />
    <!-- 拒绝 -->
    <refuse-modal ref="refuseModalRef" @ok="handleRefresh" />
    <!-- 申请改派 -->
    <apply-reassignment-modal ref="applyReassignmentModalRef" @ok="handleRefresh" />
    <!-- 审核改派 -->
    <review-reassignment-modal ref="reviewReassignmentModalRef" @ok="handleRefresh" />
    <!-- 添加用户缴费 -->
    <add-fees-modal ref="addFeesRef" @ok="handleRefresh" />
    <!-- 排车、改排 -->
    <car-selector :isLongOrder="isLongOrder" :title="carSelectorModalTitle" ref="carSelectorRef" @ok="handleRefresh" />
    <!-- 交车工单-去处理 -->
    <handle-givecar-workorder-modal ref="handleGivecarWorkorderModalRef" @ok="handleRefresh" />
    <!-- 换车工单-去处理 -->
    <handle-changecar-workorder-modal ref="handleChangecarWorkorderModalRef" @ok="handleRefresh" />
    <!-- 关闭工单 -->
    <close-modal ref="closeModalRef" @ok="handleRefresh" />
    <!-- 完成交车 短租 -->
    <shortorder-give-car-modal ref="shortorderGiveCarModalRef" @ok="handleRefresh" />
    <!-- 完成交车 长租 -->
    <longorder-give-car-modal ref="longorderGiveCarModalRef" @ok="handleRefresh" />
    <!-- 完成取车 短租 -->
    <shortorder-return-car-modal ref="shortorderReturnCarModalRef" @ok="handleRefresh" />
    <!-- 完成取车 长租 -->
    <longorder-return-car-modal ref="longorderReturnCarModalRef" @ok="handleRefresh" />
    <!-- 完成换车 短租 -->
    <shortorder-change-car-modal ref="shortorderChangeCarModalRef" @ok="handleRefresh" />
    <!-- 完成换车 长租 -->
    <longorder-change-car-modal ref="longorderChangeCarModalRef" @ok="handleRefresh" />
    <!-- 车辆入库(还车&换车)、修改入库信息(还车&换车) -->
    <car-warehousing-modal ref="carWarehousingModalRef" @ok="handleRefresh" />
    <!-- 创建换车单 -->
    <create-change-car-work-modal ref="createChangeCarWorkModalRef" @ok="handleRefresh" />
    <!-- 操作引导图 -->
    <img-tip-modal ref="imgTipModalRef" @closeTip="closeTipModal" />
    <!-- 新增备注 -->
    <component :is="orderRemarkType" @ok="loadData" ref="addRemarkRef" />
    <!-- 备注列表弹框 -->
    <component :is="remarkModalType" @ok="loadData" ref="remarkModalRef" />
    <!-- 生成电子合同 -->
    <generate-contract-modal ref="generateContractModalRef" />
  </div>
</template>

<script setup name="WorkOrderList">
  import assignModal from './components/assign-modal.vue'
  import refuseModal from './components/refuse-modal.vue'
  import applyReassignmentModal from './components/apply-reassignment-modal.vue'
  import reviewReassignmentModal from './components/review-reassignment-modal.vue'
  import addFeesModal from './components/addFees/add-fees-modal.vue'
  import carSelector from '@/views/assets/car/stock/car-selector.vue'
  import handleGivecarWorkorderModal from './components/handle-givecar-workorder-modal.vue'
  import handleChangecarWorkorderModal from './components/handle-changecar-workorder-modal.vue'
  import closeModal from './components/close-modal.vue'
  import carWarehousingModal from './components/car-warehousing-modal.vue'
  import createChangeCarWorkModal from './components/create-change-car-work-modal.vue'
  import imgTipModal from './components/img-tip-modal.vue'

  import shortorderGiveCarModal from './components/shortOrder/giveCar/give-car-modal.vue'
  import shortorderReturnCarModal from './components/shortOrder/returnCar/return-car-modal.vue'
  import shortorderChangeCarModal from './components/shortOrder/changeCar/change-car-modal.vue'

  import longorderGiveCarModal from './components/longOrder/giveCar/give-car-modal.vue'
  import longorderReturnCarModal from './components/longOrder/returnCar/return-car-modal.vue'
  import longorderChangeCarModal from './components/longOrder/changeCar/change-car-modal.vue'
  // 短租添加备注弹窗
  import shortorderAddRemarkModal from '@/views/order/short-order/components/list-modals/add-remark-modal.vue'
  // 长租添加备注弹窗
  import longorderAddRemarkModal from '@/views/order/long-order/components/list-modals/add-remark-modal.vue'
  // 短租备注弹窗
  import shortorderRemarkLogModal from '@/views/order/short-order/components/list-modals/remark-log-modal.vue'
  // 长租备注弹窗
  import longorderRemarkLogModal from '@/views/order/long-order/components/list-modals/remark-log-modal.vue'
  // 生成电子合同
  import generateContractModal from '@/views/order/components/generate-contract-modal.vue'

  import { ref, reactive, computed, onMounted, onActivated, nextTick } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { usePermission } from '@/hooks/usePermission'
  import { Modal } from '@arco-design/web-vue'
  import workListQuickNavigation from './components/work-list-quick-navigation.vue'
  import orderListQuickNavigation from './components/order-list-quick-navigation.vue'
  import { getList, acceptWork, goHandle, exportWorkOrder } from '@/api/business/workorder'
  import { findUserInfo } from '@/api/asset/maintenance'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { useExport } from '@/hooks/list'
  import { useSysDict, usePageDict } from '@/hooks/useDict'
  import useUserStore from '@/store/modules/user'
  import useNavigate from '@/hooks/useNavigate'
  import dayjs from 'dayjs'
  import { useRoute } from 'vue-router'
  const sysDict = useSysDict(['short_order_channel_type', 'short_order_acquisition_type'])
  const dict = usePageDict('workOrderDict')

  const userStore = useUserStore()
  userStore.setEpDetail()

  const { navigateTo } = useNavigate()
  const route = useRoute()
  const routeQuery = route.query

  const assignModalRef = ref() //指派负责人
  const refuseModalRef = ref() //拒绝
  const applyReassignmentModalRef = ref() //申请改派
  const reviewReassignmentModalRef = ref() //审核改派
  const addFeesRef = ref() //添加用户缴费
  const handleGivecarWorkorderModalRef = ref() //交车工单-去处理
  const handleChangecarWorkorderModalRef = ref() //换车工单-去处理
  const closeModalRef = ref() //关闭工单
  const imgTipModalRef = ref() //工单操作引到图
  const carWarehousingModalRef = ref() //车辆入库(还车&换车)、修改入库信息(还车&换车)
  const createChangeCarWorkModalRef = ref() //创建换车单

  const shortorderGiveCarModalRef = ref() //完成交车 短租
  const shortorderReturnCarModalRef = ref() //完成取车 短租
  const shortorderChangeCarModalRef = ref() //完成换车 短租

  const longorderGiveCarModalRef = ref() //完成交车 长租
  const longorderReturnCarModalRef = ref() //完成取车 长租
  const longorderChangeCarModalRef = ref() //完成换车 长租

  const switchTipOpen = ref(true)
  const switchTipOpenText = ref('')
  const userInfoMsg = ref({}) //用户信息
  const adminEmployeeId = ref()
  const isSiteCarHouseKeep = ref(null)

  // 生成电子合同浮框
  const generateContractModalRef = ref('')

  const queryParam = reactive({})
  // 列表接口调用
  const loadData = (page, type) => {
    const fn = useFetchTableDataApi(table, queryParam, getList)
    fn(page).then((result) => {
      console.log(result)
    })
    findUserInfo().then((res) => {
      userInfoMsg.value = res.result
      if (res.result.carHouseKeepOpen == 0) {
        switchTipOpen.value = false
        switchTipOpenText.value = '关闭车管家调度模式后，无派单及接单相关功能，历史订单不受影响。'
      } else {
        switchTipOpen.value = true
        switchTipOpenText.value =
          '开启车管家调度模式后，所有的长/短租订单由车管家针对交车、换车、还车负责人派单，相关负责人接单后，进行操作。分配前，请确保分配的车管家有订单、工单、司机排班的权限，如未配置会影响车管家的操作。'
      }
      isSiteCarHouseKeep.value = res.result.isSiteCarHouseKeep //1是车管家账号
      adminEmployeeId.value = res.result.employeeId //空是admin
      localStorage.setItem('carHouseKeepOpen', res.result.carHouseKeepOpen)
    })

    // before 刷新顶部快捷筛选数据、list-searcher刷新重置 重置快捷筛选
    if (type == 'reset' || type == 'submit') {
      listQuickNavigationRef.value.reset()
      OrderListQuickNavigationRef.value.reset()
    }
    listQuickNavigationRef.value.getStNum()
    OrderListQuickNavigationRef.value.getStNum()
    // end
  }
  const dateTimeAttrs = {
    type: 'i-range-picker',
    attrs: {
      showTime: true,
      timePickerProps: {
        defaultValue: ['00:00:00', '23:59:59'],
      },
    },
  }
  // 导出事件
  const handleExport = () => {
    useExport(exportWorkOrder, queryParam)
  }
  const onLink = (record) => {
    if (record.refType == 1) {
      if (usePermission('svms:order:short-order.detail')) {
        navigateTo(`/short-order/detail/${record.refId}`, `${record.refCode}-短租详情`)
      }
    } else if (record.refType == 2) {
      if (usePermission('svms:order:long-order.detail')) {
        navigateTo(`/long-order/detail/${record.refId}`, `${record.refCode}-长租详情`)
      }
    }
  }

  const format = (dayjsObj) => {
    return dayjsObj.format('YYYY-MM-DD HH:mm:ss')
  }
  // 备注查看更多
  const remarkModalRef = ref()
  const remarkModalType = ref()
  const showRemarkModal = (record) => {
    remarkModalType.value = record.orderInfo.orderType == 1 ? shortorderRemarkLogModal : longorderRemarkLogModal
    nextTick(() => {
      remarkModalRef.value.show(record.orderInfo.id)
    })
  }
  // 添加备注
  const orderRemarkType = ref(null)
  const addRemarkRef = ref()
  const addRemarkFn = (record) => {
    orderRemarkType.value = record.orderInfo.orderType == 1 ? shortorderAddRemarkModal : longorderAddRemarkModal
    nextTick(() => {
      addRemarkRef.value.show({ id: record.orderInfo.id })
    })
  }

  // 工单快捷导航点击事件
  const quickNavigationChange = (param) => {
    console.log('param', param)
    queryParam.statusList = param.status ? [param.status] : undefined
    queryParam.workSonStatus = param.workSonStatus ? param.workSonStatus : undefined
    queryParam.workTypeList = param.workTypeList ? [param.workTypeList] : undefined
    loadData()
  }
  // 订单快捷导航点击事件
  const orderQuickNavigationChange = (param) => {
    console.log('param', param)
    queryParam.orderStartTimeRange = []
    queryParam.orderStartTimeBegin = undefined
    queryParam.orderStartTimeEnd = undefined

    queryParam.orderEndTimeRange = []
    queryParam.orderEndTimeBegin = undefined
    queryParam.orderEndTimeEnd = undefined

    let today = dayjs()
    let begin = format(today.startOf('d'))
    let end = format(today.endOf('d'))
    let beginAdd = format(today.add(1, 'd').startOf('d'))
    let endAdd = format(today.add(1, 'd').endOf('d'))
    if (param.labelName == '今日交车') {
      queryParam.orderStatusList = [10, 100]
      queryParam.orderStartTimeBegin = begin
      queryParam.orderStartTimeEnd = end
      queryParam.orderStartTimeRange = [begin, end]
      OrderListQuickNavigationRef.value.clickActive('giveToday')
    }
    if (param.labelName == '今日还车') {
      queryParam.orderStatusList = [200]
      queryParam.orderEndTimeBegin = begin
      queryParam.orderEndTimeEnd = end
      queryParam.orderEndTimeRange = [begin, end]
      listQuickNavigationRef.value.clickActive('returnToday')
    }
    if (param.labelName == '明日交车') {
      queryParam.orderStatusList = [10, 100]
      queryParam.orderStartTimeBegin = beginAdd
      queryParam.orderStartTimeEnd = endAdd
      queryParam.orderStartTimeRange = [beginAdd, endAdd]
      OrderListQuickNavigationRef.value.clickActive('giveTomorrow')
    }
    if (param.labelName == '明日还车') {
      queryParam.orderStatusList = [200]
      queryParam.orderEndTimeBegin = beginAdd
      queryParam.orderEndTimeEnd = endAdd
      queryParam.orderEndTimeRange = [beginAdd, endAdd]
      listQuickNavigationRef.value.clickActive('returnTomorrow')
    }
    loadData()
  }

  // 重置
  const listQuickNavigationRef = ref()
  const OrderListQuickNavigationRef = ref()
  const onResize = () => {
    queryParam.refCode = undefined
    queryParam.refType = undefined
    queryParam.orderStatusList = []
    queryParam.orderSource = undefined
    queryParam.orderChanne = undefined
    queryParam.carModelId = undefined
    queryParam.carLicenseNo = undefined
    queryParam.workSonStatus = undefined
    queryParam.orderStartTimeRange = []
    queryParam.orderAactualStartTimeRange = []
    queryParam.orderEndTimeRange = []
    queryParam.orderActualEndTimeRange = []

    queryParam.orderStartTimeBegin = undefined
    queryParam.orderStartTimeEnd = undefined

    queryParam.actualStartTimeBegin = undefined
    queryParam.actualStartTimeEnd = undefined

    queryParam.orderEndTimeBegin = undefined
    queryParam.orderEndTimeEnd = undefined

    queryParam.actualEndTimeBegin = undefined
    queryParam.actualEndTimeEnd = undefined

    listQuickNavigationRef.value.reset()
    OrderListQuickNavigationRef.value.reset() //一起重置【订单快捷筛选】
  }

  // 排车 & 改排
  const isLongOrder = ref(false)
  const carSelectorModalTitle = ref()
  const carSelectorRef = ref()
  const platoonCarFn = (record) => {
    if (record.orderInfo.orderTypeName == '长租') {
      isLongOrder.value = true
    } else {
      isLongOrder.value = false
    }

    record.rentDays = record.orderInfo.rentDays //租期 插入
    record.orderSourceName = record.orderInfo.carSourceName //订单来源 插入

    const param = {
      carSource: 1,
      dateRange: [record.orderInfo.startTime, record.orderInfo.endTime], //["2024-03-25 14:23:00", "2024-04-06 14:22:59"],
    }

    if (record.orderInfo.carId) {
      carSelectorModalTitle.value = '改排'
      param.carId = record.orderInfo.carId // 20656 （改排时需要）
    }
    if (record.orderInfo.carModelId) {
      param.modelId = record.orderInfo.carModelId // 1683 （改排时需要）
    }

    carSelectorRef.value.open(param, {
      ...record,
      modelId: record.orderInfo.carModelId,
      orderStatus: record.orderInfo.orderStatus,
      startTime: record.orderInfo.startTime,
      endTime: record.orderInfo.endTime,
      siteId: record.orderInfo.siteId, //'98'
      platoonCarId: record.orderInfo.carId || '', // 92 改排时有值
      id: record.orderInfo.id,
      orderAcquisitionTypeName: record.orderInfo.orderAcquisitionTypeName, // 订单获取方式
    })
  }

  // 去处理
  const handle = (record, type) => {
    if (record.orderInfo.orderSource == 2 && !record.orderInfo.carId) {
      Modal.confirm({
        title: '提示',
        simple: true,
        cancelText: '取消',
        okText: '确认',
        bodyStyle: {
          'text-align': 'center',
        },
        // 自动维护 与 手动维护提示语不同 1：自动 2：手动
        content:
          record.orderInfo.channelOrderMaintenance == 1
            ? '当前车辆为渠道车辆，请先同平台车辆匹配后再处理工单'
            : '当前订单未排车辆，请先给订单排车，再处理工单',
      })
      return false
    }
    if (type == 1) {
      handleGivecarWorkorderModalRef.value.open(record)
    } else if (type == 2) {
      Modal.confirm({
        title: '提示',
        simple: true,
        cancelText: '取消',
        okText: '确认',
        bodyStyle: {
          'text-align': 'center',
        },
        content: '是否处理该还车工单？',
        onOk: () => {
          goHandle({ id: record.id, workType: record.workType }).then((res) => {
            Message.success(res.message)
            handleRefresh()
          })
        },
      })
    } else if (type == 3) {
      handleChangecarWorkorderModalRef.value.open(record)
    }
  }
  //车辆入库(修改入库信息)
  const backWarehousing = (record, type, status) => {
    if (type == 1) {
      // 还车
      carWarehousingModalRef.value.open(record, type, status)
    }
    if (type == 2) {
      // 换车
      carWarehousingModalRef.value.open(record, type, status)
    }
  }

  // 打开提示
  const imgTipModaShow = () => {
    imgTipModalRef.value.open()
  }
  // 关闭提示
  const closeTipModal = () => {
    // 关闭不再提醒
    localStorage.setItem('workOrderImgTip', 1)
  }

  onMounted(() => {
    console.log('routeQuery', routeQuery)
    if (routeQuery.workOrderCode) {
      queryParam.workCode = routeQuery.workOrderCode || undefined
    }
    if (routeQuery.statusList) {
      queryParam.statusList = routeQuery.statusList ? [Number(routeQuery.statusList)] : undefined
    }
    if (routeQuery.refCode) {
      queryParam.refCode = routeQuery.refCode || undefined
    }
  })

  onActivated(() => {
    findUserInfo().then((res) => {
      var carHouseKeepOpen = localStorage.getItem('carHouseKeepOpen')
      if (carHouseKeepOpen != 'null' && carHouseKeepOpen != res.result.carHouseKeepOpen) {
        navigateTo('/business/work-order/order')
        console.log('重刷了页面')
      }
    })
    handleRefresh()
  })

  const searchList = computed(() => {
    return [
      { label: '工单类型', prop: 'workTypeList', type: 'a-select', options: dict.workOrderType, multiple: true },
      {
        label: '工单负责人',
        prop: 'workOperatorList',
        type: 'remote-select',
        attrs: { multiple: true, type: 'staff_select_staff_by_orgId' },
      },
      { label: '归属门店', prop: 'siteIdList', type: 'remote-select', attrs: { multiple: true, type: 'multiple_site_listBystaff' } },
      { label: '工单状态', prop: 'statusList', type: 'a-select', options: dict.workOrderStatus, multiple: true },
      {
        label: '工单指派人',
        prop: 'workCompleteIdList',
        type: 'remote-select',
        attrs: { multiple: true, type: 'assign_staff_list_multiple' },
      },
      { label: '工单号', prop: 'workCode', type: 'a-input' },
      { label: '车型', prop: 'carModelId', type: 'remote-select', attrs: { type: 'car_model_tenantList' } },
      { label: '车牌', prop: 'carLicenseNo', type: 'a-input' },
      { label: '标签', prop: 'workLabel', type: 'a-select', options: dict.workLabel },
      {
        label: '工单实际开始时间',
        prop: 'startTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.startTimeStart = value[0]
          queryParam.startTimeEnd = value[1]
        },
      },
      {
        label: '工单实际完成时间',
        prop: 'endTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.endTimeStart = value[0]
          queryParam.endTimeEnd = value[1]
        },
      },
      {
        label: '工单预计完成时间',
        prop: 'predictionEndTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.expectEndTimeStart = value[0]
          queryParam.expectEndTimeEnd = value[1]
        },
      },
    ]
  })

  const orderSearchList = computed(() => {
    return [
      { label: '关联订单号', prop: 'refCode', type: 'a-input' },
      { label: '订单类型', prop: 'refType', type: 'a-select', options: dict.orderType },
      { label: '订单状态', prop: 'orderStatusList', type: 'a-select', options: dict.orderStatus, multiple: true },
      { label: '订单来源', prop: 'orderSource', type: 'a-select', options: dict.orderSourceEnum },
      { label: '订单渠道', prop: 'orderChanne', type: 'a-select', options: sysDict.short_order_channel_type },
      {
        label: '预计取车时间',
        prop: 'orderStartTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.orderStartTimeBegin = value[0]
          queryParam.orderStartTimeEnd = value[1]
        },
      },
      {
        label: '实际取车时间',
        prop: 'orderAactualStartTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.actualStartTimeBegin = value[0]
          queryParam.actualStartTimeEnd = value[1]
        },
      },
      {
        label: '预计还车时间',
        prop: 'orderEndTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.orderEndTimeBegin = value[0]
          queryParam.orderEndTimeEnd = value[1]
        },
      },
      {
        label: '实际还车时间',
        prop: 'orderActualEndTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.actualEndTimeBegin = value[0]
          queryParam.actualEndTimeEnd = value[1]
        },
      },
    ]
  })

  // table 配置
  const table = useTable({
    columns: [
      { title: '工单类型', dataIndex: 'workTypeName', width: 100, fixed: 'left' },
      { title: '工单状态', slotName: 'statusNames', width: 140, fixed: 'left', width: 100 },
      { title: '工单负责人', dataIndex: 'workOperatorName', width: 160, slotName: 'staffMsg', fixed: 'left', width: 100 },
      { title: '关联订单信息', dataIndex: 'templateName', slotName: 'orderMsg', width: 250 },
      { title: '车辆信息', dataIndex: 'templateName', slotName: 'carMsg', width: 230 },
      { title: '工单号', dataIndex: 'workCode', width: 230 },
      { title: '归属门店', dataIndex: 'siteName', width: 200 },
      { title: '工单预计完成时间', dataIndex: 'expectEndTime', width: 170 },
      { title: '工单实际开始时间', dataIndex: 'startTime', width: 170 },
      { title: '工单实际完成时间', dataIndex: 'endTime', width: 170 },
      { title: '车管家调度模式', dataIndex: 'isHousekeepp', slotName: 'isHousekeep', width: 130 },
      { title: '工单指派人', dataIndex: 'workCompleteUser' },
      { title: '创建时间', dataIndex: 'createTime', width: 170 },
      {
        title: '备注',
        slotName: 'remark',
        titleTooltipContent: '备注中展示订单备注、交车备注、还车备注、续租备注、换车备注，存在多条时点击更多查看所有备注信息',
      },
    ],
    operates: [
      // switchTipOpen true车管家开启
      // adminEmployeeId null是admin账号
      // isSiteCarHouseKeep 车管家账号
      // isWorkOperator 1负责人
      // workOperatorId 有值表示有负责人
      // showPaymentForm 1展示添加报销单/付款单
      // orderInfo.orderSource 2渠道订单
      // orderInfo.channelOrderMaintenance 1自动同步
      // workType工单类型  1, "交车工单"  2, "还车工单"  3, "换车工单"
      // status工单状态  1待指派 2待处理 3待开始 4进行中 5已完成 6已关闭 ;  子状态workSonStatus 31已申请改派 32申请改派-通过 33申请改派-拒绝 41已取到车 42已完成换车

      // 公共判断 (switchTipOpen.value && adminEmployeeId.value != null && record.workSonStatus != 31 && record.isHousekeepRole == 1)
      // 审核改派 record.workSonStatus == 31
      // 线下 + 渠道-手动 (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2))
      // 渠道 + 自动 (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1)

      // 判断流程:
      // 1.状态 record.status
      // 2.工单类型 record.workType
      // 3.订单来源
      // 4.车管家账号 isSiteCarHouseKeep.value == 1
      // 3.开启车管家 switchTipOpen.value
      // 6.车管家权限 record.isHousekeepRole == 1
      // 7.负责人权限 record.isWorkOperator == 1
      // 8.有无负责人 record.workOperatorId
      // 9.非admin账号 adminEmployeeId.value
      //10.非审核改派 record.workSonStatus != 31
      {
        label: '指派负责人', //ok`
        permission: 'svms:business:workOrder:work.assign',
        show: (record) => record.status == 1 && record.isHousekeepRole == 1 && switchTipOpen.value && adminEmployeeId.value,
        method: (record) => {
          assignModalRef.value.open(record)
        },
      },
      {
        label: '接受', //ok`
        permission: 'svms:business:workOrder:work.get',
        show: (record) =>
          record.status == 2 &&
          (((record.workType == 1 || record.workType == 2 || record.workType == 3) &&
            (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2))) ||
            (record.workType == 3 && record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1)) &&
          switchTipOpen.value &&
          record.isWorkOperator == 1 &&
          record.workOperatorId &&
          adminEmployeeId.value &&
          record.workSonStatus != 31,
        method: (record) => {
          Modal.confirm({
            title: '提示',
            simple: true,
            cancelText: '取消',
            okText: '确认',
            bodyStyle: {
              'text-align': 'center',
            },
            content: '是否接受该工单？',
            onOk: () => {
              acceptWork({ id: record.id, status: record.status }).then((res) => {
                Message.success(res.message)
                handleRefresh()
              })
            },
          })
        },
      },
      {
        label: '拒绝', //ok`
        permission: 'svms:business:workOrder:work.refuse',
        show: (record) =>
          record.status == 2 &&
          (((record.workType == 1 || record.workType == 2 || record.workType == 3) &&
            (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2))) ||
            (record.workType == 3 && record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1)) &&
          switchTipOpen.value &&
          record.isWorkOperator == 1 &&
          record.workOperatorId &&
          adminEmployeeId.value &&
          record.workSonStatus != 31,
        method: (record) => {
          refuseModalRef.value.open(record)
        },
      },
      {
        label: '去处理', //ok`
        permission: 'svms:business:workOrder:work.handle',
        show: (record) =>
          switchTipOpen.value &&
          adminEmployeeId.value &&
          record.workSonStatus != 31 &&
          record.status == 3 &&
          record.isWorkOperator == 1 &&
          (record.orderInfo.orderSource == 1 ||
            (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2) ||
            (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1 && record.workType == 3 && record.carId)),
        method: (record) => {
          if (record.workType == 1) {
            handle(record, 1)
          } else if (record.workType == 2) {
            handle(record, 2)
          } else {
            handle(record, 3)
          }
        },
      },
      {
        label: '完成交车', //ok`
        permission: 'svms:business:workOrder:work.giveCar',
        show: (record) =>
          // switchTipOpen.value &&
          adminEmployeeId.value &&
          record.workSonStatus != 31 &&
          record.status == 4 &&
          record.isWorkOperator == 1 &&
          record.workType == 1 &&
          (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)),
        method: (record) => {
          if (record.orderInfo.orderType == 1) {
            shortorderGiveCarModalRef.value.open(record)
          }
          if (record.orderInfo.orderType == 2) {
            longorderGiveCarModalRef.value.open(record)
          }
        },
      },
      {
        label: '完成取车', //ok`
        permission: 'svms:business:workOrder:work.returnCar',
        show: (record) =>
          // switchTipOpen.value &&
          adminEmployeeId.value &&
          record.workSonStatus != 31 &&
          record.workSonStatus != 41 &&
          record.status == 4 &&
          record.isWorkOperator == 1 &&
          record.workType == 2 &&
          (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)),
        method: (record) => {
          if (record.orderInfo.orderType == 1) {
            shortorderReturnCarModalRef.value.open(record)
          }
          if (record.orderInfo.orderType == 2) {
            longorderReturnCarModalRef.value.open(record)
          }
        },
      },
      {
        label: '完成换车', //ok`
        permission: 'svms:business:workOrder:work.changeCar',
        show: (record) =>
          // switchTipOpen.value &&
          adminEmployeeId.value &&
          record.workSonStatus != 31 &&
          record.workSonStatus != 42 &&
          record.status == 4 &&
          record.isWorkOperator == 1 &&
          record.workType == 3,
        method: (record) => {
          if (record.orderInfo.orderType == 1) {
            shortorderChangeCarModalRef.value.open(record)
          }
          if (record.orderInfo.orderType == 2) {
            longorderChangeCarModalRef.value.open(record)
          }
        },
      },
      {
        label: '排车', //ok`
        permission: 'svms:business:workOrder:work.platoonCar',
        show: (record) =>
          switchTipOpen.value &&
          record.workSonStatus != 31 &&
          adminEmployeeId.value &&
          record.workType == 1 &&
          (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
            ((record.status == 1 && isSiteCarHouseKeep.value == 1) ||
              (record.status == 2 && record.workOperatorId && isSiteCarHouseKeep.value == 1) ||
              (record.status == 3 && record.isWorkOperator == 1))) ||
            (record.orderInfo.orderSource == 2 &&
              record.orderInfo.channelOrderMaintenance == 1 &&
              record.status == 1 &&
              isSiteCarHouseKeep.value == 1)) &&
          [10].includes(record.orderInfo.orderStatus),
        method: (record) => {
          platoonCarFn(record)
        },
      },
      {
        label: '改排', //ok`
        permission: 'svms:business:workOrder:work.platoonCarChange',
        show: (record) =>
          switchTipOpen.value &&
          record.workSonStatus != 31 &&
          adminEmployeeId.value &&
          record.workType == 1 &&
          (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
            ((record.status == 1 && isSiteCarHouseKeep.value == 1) ||
              (record.status == 2 && record.workOperatorId && isSiteCarHouseKeep.value == 1) ||
              (record.status == 3 && record.isWorkOperator == 1))) ||
            (record.orderInfo.orderSource == 2 &&
              record.orderInfo.channelOrderMaintenance == 1 &&
              record.status == 1 &&
              isSiteCarHouseKeep.value == 1)) &&
          [100].includes(record.orderInfo.orderStatus),
        method: (record) => {
          platoonCarFn(record)
        },
      },
      {
        label: '车辆入库', //ok`
        permission: 'svms:business:workOrder:work.backWarehousing',
        show: (record) =>
          // switchTipOpen.value &&
          record.isWorkOperator == 1 &&
          record.status == 4 &&
          (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
            (record.workType == 2 || record.workType == 3)) ||
            (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1 && record.workType == 3)) &&
          record.workSonStatus != 31 &&
          adminEmployeeId.value &&
          (record.workSonStatus == 41 || record.workSonStatus == 42),
        method: (record) => {
          if (record.workType == 2) {
            backWarehousing(record, 1, 'create')
          }
          if (record.workType == 3) {
            backWarehousing(record, 2, 'create')
          }
        },
      },
      {
        label: '修改入库信息', //ok`
        permission: 'svms:business:workOrder:work.editBackWarehousing',
        show: (record) =>
          switchTipOpen.value &&
          record.isWorkOperator == 1 &&
          adminEmployeeId.value &&
          record.workSonStatus != 31 &&
          (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
          record.status == 5 &&
          (record.workType == 2 || record.workType == 3),
        method: (record) => {
          if (record.workType == 2) {
            backWarehousing(record, 1, 'edit')
          }
          if (record.workType == 3) {
            backWarehousing(record, 2, 'edit')
          }
        },
      },
      {
        label: '关闭工单', //ok`
        permission: 'svms:business:workOrder:work.closeWork',
        show: (record) =>
          // switchTipOpen.value &&
          record.isWorkOperator == 1 &&
          adminEmployeeId.value &&
          record.workSonStatus != 31 &&
          record.status == 4 &&
          (record.orderInfo.orderStatus == -100 || record.orderInfo.orderStatus == -1000) &&
          (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
            (record.workType == 1 || record.workType == 2 || record.workType == 3)) ||
            (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1 && record.workType == 3)),
        method: (record) => {
          closeModalRef.value.open(record)
        },
      },
      {
        label: '添加用户缴费', //ok`
        span: 2,
        permission: 'svms:business:workOrder:work.addFees',
        show: (record) =>
          // switchTipOpen.value &&
          adminEmployeeId.value &&
          record.isWorkOperator == 1 &&
          record.workSonStatus != 31 &&
          (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
            (record.status == 3 || record.status == 4 || record.status == 5)) ||
            (record.orderInfo.orderSource == 2 &&
              record.orderInfo.channelOrderMaintenance == 1 &&
              ((record.status == 5 && (record.workType == 1 || record.workType == 2)) ||
                ((record.status == 3 || record.status == 4 || record.status == 5) && record.workType == 3)))),
        method: (record) => {
          addFeesRef.value.open(record)
        },
      },
      {
        label: '添加报销单', //ok`
        permission: 'svms:business:workOrder:work.addReimbursement',
        show: (record) =>
          // switchTipOpen.value &&
          adminEmployeeId.value &&
          record.isWorkOperator == 1 &&
          record.workSonStatus != 31 &&
          record.showPaymentForm == 1 &&
          (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
            (record.status == 3 || record.status == 4 || record.status == 5 || record.status == 6)) ||
            (record.orderInfo.orderSource == 2 &&
              record.orderInfo.channelOrderMaintenance == 1 &&
              (((record.status == 5 || record.status == 6) && (record.workType == 1 || record.workType == 2)) ||
                ((record.status == 3 || record.status == 4 || record.status == 5 || record.status == 6) && record.workType == 3)))),
        method: (record) => {
          var costParams = {
            id: record.id, //工单id
            workCode: record.workCode, //工单号
            workType: record.workType, //工单类型
            workTypeName: record.workTypeName, //工单类型名称
            refType: record.refType, //关联订单类型 1 短租  2长租
            refId: record.refId, //订单id
            refCode: record.refCode, //关联订单号
            siteId: record.siteId, //归属门店
            siteName: record.siteName, //归属门店名称
            memberName: record.orderInfo.memberName, //承租人姓名
            memberPhone: record.orderInfo.memberPhone, //承租人电话
          }
          navigateTo('/operate-cost/create-apply?page=workOrder&costParams=' + JSON.stringify(costParams), '新增报销单')
        },
      },
      {
        label: '添加付款单', //ok`
        permission: 'svms:business:workOrder:work.addPay',
        show: (record) =>
          // switchTipOpen.value &&
          adminEmployeeId.value &&
          record.isWorkOperator == 1 &&
          record.workSonStatus != 31 &&
          record.showPaymentForm == 1 &&
          (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
            (record.status == 3 || record.status == 4 || record.status == 5 || record.status == 6)) ||
            (record.orderInfo.orderSource == 2 &&
              record.orderInfo.channelOrderMaintenance == 1 &&
              (((record.status == 5 || record.status == 6) && (record.workType == 1 || record.workType == 2)) ||
                ((record.status == 3 || record.status == 4 || record.status == 5 || record.status == 6) && record.workType == 3)))),
        method: (record) => {
          var costParams = {
            id: record.id, //工单id
            workCode: record.workCode, //工单号
            workType: record.workType, //工单类型
            workTypeName: record.workTypeName, //工单类型名称
            refType: record.refType, //关联订单类型 1 短租  2长租
            refId: record.refId, //订单id
            refCode: record.refCode, //关联订单号
            siteId: record.siteId, //归属门店
            siteName: record.siteName, //归属门店名称
            memberName: record.orderInfo.memberName, //承租人姓名
            memberPhone: record.orderInfo.memberPhone, //承租人电话
          }
          navigateTo('/operate-cost/create-pay?page=workOrder&costParams=' + JSON.stringify(costParams), '新增付款单')
        },
      },
      {
        label: '申请改派', //ok`
        permission: 'svms:business:workOrder:work.applyReassignment',
        show: (record) =>
          switchTipOpen.value &&
          adminEmployeeId.value &&
          record.workSonStatus != 31 &&
          record.status == 3 &&
          record.isWorkOperator == 1 &&
          (record.orderInfo.orderSource == 1 ||
            (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2) ||
            (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1 && record.workType == 3)),
        method: (record) => {
          applyReassignmentModalRef.value.open(record)
        },
      },
      {
        label: '审核改派', //ok
        permission: 'svms:business:workOrder:work.reviewReassignment',
        show: (record) =>
          switchTipOpen.value &&
          isSiteCarHouseKeep.value == 1 &&
          record.isHousekeepRole == 1 &&
          record.status == 3 &&
          record.workSonStatus == 31 &&
          (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
            (record.workType == 1 || record.workType == 2 || record.workType == 3)) ||
            (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1 && record.workType == 3)),
        method: (record) => {
          reviewReassignmentModalRef.value.open(record)
        },
      },
      {
        label: '添加备注',
        permission: 'svms:business:workOrder:work.addremark',
        method: (record) => {
          addRemarkFn(record)
        },
      },
      {
        label: '查看详情', //ok
        permission: 'svms:business:workOrder:work.details',
        show: (record) => !(record.status == 1 && record.isWorkOperator == 1),
        method: (record) => {
          navigateTo(
            '/work-order/detail/' +
              record.id +
              '?tab=1&orderId=' +
              record.refId +
              '&workCode=' +
              record.workCode +
              '&orderType=' +
              record.orderInfo.orderType +
              '&status=' +
              record.status,
            `${record.workCode}-详情`
          )
        },
      },
      {
        label: '生成电子合同',
        permission: 'svms:business:workOrder.handContract',
        show: (record) => [3, 4, 5].includes(record.status),
        method: (record) => {
          generateContractModalRef.value.show(record, 'workOrder')
        },
      },
      {
        label: '合同记录',
        permission: 'svms:business:workOrder:work.signOrder',
        show: (record) => [3, 4, 5].includes(record.status),
        method: (record) => {
          navigateTo(
            '/work-order/detail/' +
              record.id +
              '?tab=3&associationorderTab=4&orderId=' +
              record.refId +
              '&workCode=' +
              record.workCode +
              '&orderType=' +
              record.orderInfo.orderType +
              '&status=' +
              record.status,
            `${record.workCode}-详情`
          )
        },
      },
      // 只有当车辆上安装了车载box时，才展示
      // 跳转到轨迹页的时候，要带着车牌号进入。如果是换车工单会涉及到2台车，则使用换上车进行轨迹查询，如果换上车没安装车载box则不会展示轨迹查看按钮
      // 转到轨迹的时候，默认使用工单的实际开始时间、实际结束时间，将这2个值带进去
      // 如果工单还没开始执行，既没有实际开始时间也没有实际结束时间，或者只有实际开始时间没有实际结束时间，则依然进行页面跳转，但是带不进去的时间，默认为空
      {
        label: '查看车辆轨迹',
        show: (record) => record.canTbox,
        permission: 'svms:business:workOrder:work.track',
        method: (record) => {
          navigateTo(`/car-box-use/track/${record.carId}?page=workOrder&startTime=${record.startTime}&endTime=${record.endTime}`)
        },
      },
    ],
    buttons: [
      {
        type: 'primary',
        icon: 'plus',
        label: '创建换车工单', //ok
        show: (record) => switchTipOpen.value && adminEmployeeId.value && isSiteCarHouseKeep.value == 1,
        permission: 'svms:business:workOrder:work.createChangeCarWork',
        method: (record) => {
          createChangeCarWorkModalRef.value.open(record)
        },
      },
      {
        mode: 'import',
        label: '导出', //ok
        permission: 'svms:business:workOrder:work.export',
        method: () => handleExport(),
      },
    ],
  })

  // 刷新列表，筛选
  // TODO 优化 onActived 每一次都掉lodarData，导致切换tab页时，会重新请求一次
  const handleRefresh = () => {
    loadData()
    // listQuickNavigationRef.value.getStNum()
    // OrderListQuickNavigationRef.value.getStNum()
  }
</script>

<style lang="less" scoped>
  .switch-tip {
    margin-right: 4px;
    color: #1d2129;
    font-weight: 400;
  }
  .order-line {
    color: #165dff;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
  }
  .workson_status {
    color: #722ed1;
  }
  .tlts {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    .tlt_l {
      width: 4px;
      height: 18px;
      background: #1890ff;
    }
    .tlt_c {
      margin: 0 8px;
      color: #1d2129;
      font-weight: 500;
      font-size: 16px;
    }
    .tlt_r {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 3px 8px;
      border: 1px solid #1890ff;
      border-radius: 2px;
      background: #dfeeff;
      .icon-img {
        width: 14px;
        height: 14px;
        margin-right: 2px;
      }
      .tlt_name {
        color: #1890ff;
        font-size: 12px;
        font-weight: 400;
        cursor: pointer;
      }
    }
  }
  .tip_img_border {
    width: 100%;

    border: 1px solid #1890ff;
    border-radius: 2px;
    padding: 10px;
    margin-bottom: 20px;
  }
  .remark-info {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .remark-btn {
    color: #1890ff;
    cursor: pointer;
  }
</style>
